<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>记录详情</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/common.css" />
		<style>
			.mui-card{
				border: none!important;
			}
			.mui-table-view-cell>a:not(.mui-btn){
				margin: 0!important;
			}
			.mg{
				margin: 0 !important;
			}
			.t-color{
				color: royalblue !important;
				border: none;
				padding: 0!important;
			}
			.item-flashing li.pd{
				padding: 0;
			}
			
			.innerImg{
				width: 30%;
				height: 5rem;
				margin: 0;
				margin-left: 2.5%;
				background: url(../images/tupian.png);
				background-position: center;
				background-repeat: no-repeat;
				background-size: contain;
				border: 1px solid #EBEBEB;
				float: left;
			}
			.innerImg img{
				/*max-width: 100%;*/
				width:100%;
				height: 100%;
			}
			.video{
				width: 96%;
				height: 11rem;
				margin: 0 auto;
				background-image: url(../images/video.png);
				background-position: center;
				background-repeat: no-repeat;
				background-size: 30%;
				background-color: rgba(0,0,0,0.3);
			}
			.mui-preview-image.mui-fullscreen {
				position: fixed;
				z-index: 20;
				background-color: #000;
			}
			.mui-preview-header,
			.mui-preview-footer {
				position: absolute;
				width: 100%;
				left: 0;
				z-index: 10;
			}
			.mui-preview-header {
				height: 44px;
				top: 0;
			}
			.mui-preview-footer {
				height: 50px;
				bottom: 0px;
			}
			.mui-preview-header .mui-preview-indicator {
				display: block;
				line-height: 25px;
				color: #fff;
				text-align: center;
				margin: 15px auto 4;
				width: 70px;
				background-color: rgba(0, 0, 0, 0.4);
				border-radius: 12px;
				font-size: 16px;
			}
			.mui-preview-image {
				display: none;
				-webkit-animation-duration: 0.5s;
				animation-duration: 0.5s;
				-webkit-animation-fill-mode: both;
				animation-fill-mode: both;
			}
			.mui-preview-image.mui-preview-in {
				-webkit-animation-name: fadeIn;
				animation-name: fadeIn;
			}
			.mui-preview-image.mui-preview-out {
				background: none;
				-webkit-animation-name: fadeOut;
				animation-name: fadeOut;
			}
			.mui-preview-image.mui-preview-out .mui-preview-header,
			.mui-preview-image.mui-preview-out .mui-preview-footer {
				display: none;
			}
			.mui-zoom-scroller {
				position: absolute;
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				-webkit-box-align: center;
				-webkit-align-items: center;
				align-items: center;
				-webkit-box-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				width: 100%;
				height: 100%;
				margin: 0;
				-webkit-backface-visibility: hidden;
			}
			.mui-zoom {
				-webkit-transform-style: preserve-3d;
				transform-style: preserve-3d;
			}
			.mui-slider .mui-slider-group .mui-slider-item img {
				width: auto;
				height: auto;
				max-width: 100%;
				max-height: 100%;
			}
			.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
				width: 100%;
			}
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
				display: inline-table;
			}
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
				display: table-cell;
				vertical-align: middle;
			}
			.mui-preview-loading {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				display: none;
			}
			.mui-preview-loading.mui-active {
				display: block;
			}
			.mui-preview-loading .mui-spinner-white {
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -25px;
				margin-top: -25px;
				height: 50px;
				width: 50px;
			}
			.mui-preview-image img.mui-transitioning {
				-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
				transition: transform 0.5s ease, opacity 0.5s ease;
			}
			@-webkit-keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			@keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			@-webkit-keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			@keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			p img {
				max-width: 100%;
				height: auto;
			}
			.mui-li{
				padding: .5rem .8rem;
			}
			.imgBox{
				margin: 0;
				padding: 0;
				padding: .5rem 0!important;
			}
			.fl-l{
				float: left;
			}
			.my-span{
				width: 70%;
				display: inline-block;
				line-height: 2rem;
				padding-left: .3rem;
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">记录详情</h1>
		</header>
		<div class="mui-content">
			<div class="mui-card mg">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell mui-collapse mui-li">
						<a class="mui-navigate-right t-color" href="#">人员信息</a>
						<div class="mui-collapse-content">
							<ul class="item-flashing">
								<li class="item-weight pd">
									<label for="">姓名</label>
									<span id="name"></span>
								</li>
								<li class="item-weight pd">
									<label for="">手机号码</label>
									<span id="user_mobile"></span>
								</li>
								<!--<li class="item-weight pd">
									<label for="">身份证号</label>
									<span id="IDCardNo"></span>
								</li>
								<li class="item-weight pd">
									<label for="">性别</label>
									<span id="sex"></span>
								</li>
								<li class="item-weight pd">
									<label for="">民族</label>
									<span id="nation"></span>
								</li>
								<li class="item-weight pd">
									<label for="" class="fl-l">户籍地址</label>
									<span id="censusAddress" class="my-span"></span>
								</li>
								<li class="item-weight pd">
									<label for="">出生日期</label>
									<span id="birthday"></span>
								</li>-->
							</ul>
						</div>
					</li>
					<li class="mui-table-view-cell mui-collapse mui-li">
						<a class="mui-navigate-right t-color" href="#">刷卡信息</a>
						<div class="mui-collapse-content">
							<ul class="item-flashing">
								<li class="item-weight pd">
									<label for="" class="fl-l">房屋地址</label>
									<span id="house_address" class="my-span"></span>
								</li>
								<li class="item-weight pd">
									<label for="">刷卡时间</label>
									<span id="rec_time"></span>
								</li>
								<li class="item-weight pd">
									<label for="">门卡类型</label>
									<span id="door_card_type"></span>
								</li>
								<li class="item-weight pd">
									<label for="">开卡类型</label>
									<span id="inOutType"></span>
								</li>
								<li class="item-weight pd">
									<label for="">开门结果</label>
									<span id="inOutResult"></span>
								</li>
								<li class="item-weight pd" style="display: none;">
									<label for="">失败描述</label>
									<span id="errortDesc"></span>
								</li>
							</ul>
						</div>
					</li>
					<li class="mui-table-view-cell mui-collapse mui-active mui-li">
						<a class="mui-navigate-right t-color" href="#">开门图片</a>
						<div class="mui-collapse-content imgBox" id="InOutPic">
							<div class="innerImg"><img src="" alt="" data-preview-src="" data-preview-group="1"/>
							
							</div>
							<div class="innerImg"><img src="" alt="" data-preview-src="" data-preview-group="1"/>
							
							</div>
							<div class="innerImg"><img src="" alt="" data-preview-src="" data-preview-group="1"/>
							
							</div>
						</div>
					</li>
					<li class="mui-table-view-cell mui-collapse mui-active mui-li">
						<a class="mui-navigate-right t-color" href="#">开门视频</a>
						<div class="mui-collapse-content">
							<div class="video" id="palyVideo">
								
							</div>
							
						</div>
					</li>
				</ul>
			</div>
			
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/app.js" ></script>
		<script src="../js/md5.js"></script>
		<script src="../js/mui.zoom.js"></script>
		<script src="../js/mui.previewimage.js"></script>
		<script src="../js/jquery.js"></script>
		<script>
			mui.init({
				swipeBack:true //启用右滑关闭功能
			});
			var key = 'udacs!@#';//固定的key值
			var mobile = localStorage.getItem('mobile');
			var timestamp = formatDateTime();//年月日时分秒
			var token = mobile + timestamp + key;//token的拼接
			var md5 = hex_md5(token);//token的ma5加密
			
			var inAndOut_detail = JSON.parse(localStorage.getItem('inAndOut_detail'));
			getVideo(inAndOut_detail.id,inAndOut_detail.inOutType);  //获取视频
			
			//获取人员信息和刷卡信息
			var doorCardType = {0:'IC卡',1:'身份证',2:'护照'};
			var inOutTypeArr = {0:'刷卡开门',1:'app开门',2:'后台开门',3:'室内按钮开门'};
	        function getInAndOutDetail(id,inOutType) {
	        	$.ajax(httpUrl+'get_rec_detail',{
					data:JSON.stringify({
						"auth":{ 
							"mobile":mobile,
							"token":md5,
							"imei":"imei",
							"imsi":"imsi",
							"timestamp" :timestamp
						},
				   		"api_ver":"1",
						"req":{
							"id": id
						}
					}),
					dataType:'json',//服务器返回json格式数据
					type:'post',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					contentType: "text/plain; charset=utf-8",
	                success: function (data) {
	                    $("#name").html(data.resp.name);
	                    $("#user_mobile").html(data.resp.user_mobile);
	                    $("#house_address").html(data.resp.house_address);
	                    $("#rec_time").html(data.resp.rec_time);
	                    $("#door_card_type").html(doorCardType[data.resp.door_card_type]);
	                    $("#inOutType").html(inOutTypeArr[data.resp.inOutType]);
	                    if(data.resp.inOutResult == 0){
	                    	$("#inOutResult").html('成功').css('color','blue');
	                    }else if(data.resp.inOutResult == 1){
	                    	$("#inOutResult").html('失败').css('color','red');
	                    	$("#errortDesc").html(data.resp.errortDesc).closest('li').show();
	                    }
	                  	var imgArr = $("#InOutPic").find('img');
	                    var text = '';
	                    if(data.resp.imgs.length > 0){
	                    	for(var i=0;i<3;i++){
	                    		var src = httpUrl+"getImgRes?mediaId="+data.resp.imgs[i].m_id+"&inOutType="+data.resp.inOutType;
	                    		$(imgArr[i]).prop('src',src);
	                    	}	                       
	                        for(var j = 3;j < data.resp.imgs.length;j++){ //弹出层显示所有图片
	                        	var src = httpUrl+"getImgRes?mediaId="+data.resp.imgs[j].m_id+"&inOutType="+data.resp.inOutType;
	                            text += '<img src="'+src+'" alt="" data-preview-src="" data-preview-group="1" style="display:none;"/ >';
	                        }
							$("#InOutPic").append(text);
	                    }
	                }
	            });
	        }
	        //获取图片
	        function getImage(id,inOutType){
	            $.ajax({
	                type: "GET",
	                dataType: "jsonp",
	                contentType: 'application/json;charset=UTF-8',
	                url: httpUrl+'loadMSPicture',
	                data: {
	                    'id':id
	                }, 
	                jsonp:'callback',
	                jsonpCallback:'success_jsonpCallback',
	                success: function (data) {
	                	var imgArr = $("#InOutPic").find('img');
	                    var text = '', layerText = '';
	                    if(inOutType === '1' || inOutType === '2'){
	                    
	                    	for(var i=0;i<3;i++){
	                    		
	                    		$(imgArr[i]).attr('src',fileUrl+"getImgeKey="+data[i]);
	                    	}
//	                       
	                        for(var j = 3;j < data.length;j++){ //弹出层显示所有图片
	                            text += '<img src="'+fileUrl+'getImgeKey='+data[j]+'" alt="" data-preview-src="" data-preview-group="1" style="display:none;"/ >';
	                        }
						}else{
							for(var i=0;i<3;i++){
	                    		$(imgArr[i]).attr('src',"data:image/png;base64,"+data[i]);
	                    	}
//	                        
	                        for(var n = 3;n < data.length;n++){ //弹出层显示所有图片
	                            text += '<img src="data:image/png;base64,'+data[n]+'" alt="" data-preview-src="" data-preview-group="1" style="display: none;"/>';
	                        }
						}
						
	                    $("#InOutPic").append(text);
	                }
	            });
	        }
	
	        //获取视频
	        var VideoUrl='';
	        function getVideo(id,inOutType) {
	            var a = $.ajax(httpUrl+'get_rec_video',{
					data:JSON.stringify({
						"auth":{ 
							"mobile":mobile,
							"token":md5,
							"imei":"imei",
							"imsi":"imsi",
							"timestamp" :timestamp
						},
				   		"api_ver":"1",
						"req":{
							"id": id
						}
					}),
					dataType:'json',//服务器返回json格式数据
					type:'post',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					contentType: "text/plain; charset=utf-8",
	                success: function (data) {
	                	if(!$.isEmptyObject(data.resp)){ 
	                		VideoUrl = data.resp.video; 
	                	}
	                	getInAndOutDetail(id,inOutType);  //获取人员信息和刷卡信息
	                },
	                // 超时处理
	                complete: function(XMLHttpRequest,status){
				　　　　if(status=='timeout'){
				 　　　　　 	a.abort(); //中断请求
							mui.toast('连接超时，请重新操作！',{duration:'2000',type:'div'});
				　　　　}
				　　}
	            });
	        }
	        
	        document.getElementById("palyVideo").addEventListener('tap',function(){
	        	if(VideoUrl==''){
	        		mui.toast('没有监控视频！',{duration:'2000',type:'div'});
	        	}else{
	        		mui.toast('正在加载视频，请稍等！',{duration:'2000',type:'div'});
	        		window.android.playVideo(VideoUrl);
	        	}
	        })
	        
		</script>
		<script>
			mui.previewImage();
		</script>
	</body>

</html>